import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Button, InputNumber } from 'antd';
import SsqDataList from '@/components/SsqDataList';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import SsqPredictionData from '@/components/SsqPredictionData';
import { StateType as SsqPredictionDataStateType } from '@/models/SsqPredictionData';
import { StateType as SsqDataListStateType } from '@/models/SsqDataList';

interface SsqProps {
  dispatch: Dispatch;
  ssqDataList: SsqDataListStateType[];
  ssqPredictionData: SsqPredictionDataStateType;
}

const Ssq: React.FC<SsqProps> = ({ dispatch, ssqDataList, ssqPredictionData }) => {
  const [sampleCount, setSampleCount] = useState<number>(1);

  useEffect(() => {
    predict();
  }, [sampleCount]);

  const loadData = () => {
    dispatch({
      type: 'ssqDataList/load',
      payload: {
        name: 'ssq',
        issueCount: 100,
      },
    });
  };

  const predict = () => {
    dispatch({
      type: 'ssqPredictionData/predict',
      payload: {
        sampleCount,
        ssqDataList,
      },
    });
  };

  return (
    <div className={styles.ssq}>
      <Button type={'primary'} onClick={loadData} style={{ margin: '20px auto' }}>加载数据</Button>
      <SsqDataList dataSource={ssqDataList} />
      <div style={{ margin: '20px auto' }}>
        样本数：
        <InputNumber
          precision={0}
          step={1}
          max={100}
          min={1}
          value={sampleCount}
          onChange={(value) => setSampleCount(value)}
        />
        <Button type={'primary'} onClick={predict} style={{ marginLeft: '30px' }}>回测</Button>
      </div>
      <SsqPredictionData dataSource={ssqPredictionData.dataSource} summary={ssqPredictionData.summary} />
    </div>
  );
};

export default connect(({ ssqDataList, ssqPredictionData }: any) => ({
  ssqDataList, ssqPredictionData,
}))(Ssq);
